import React from 'react'
// import PropTypes from 'prop-types'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
// import { message } from 'antd'
// import { awaitWrap } from '@js/tool'
import { ApproveBlock, Header, TextLine, TitleLine, DocLink, TextCell, Split } from '@components/ApprovePre/Approve'
import { getData } from './ajax'
import { awaitWrap, formatDate } from '@js/tool'
import { Skeleton, Alert } from 'antd'
// import { download } from '@js/downloadRename'

class Avoid extends Component {
  state = {
    list: [],
    loading: false
  }

  async initData () {
    this.setState({ loading: true })
    const [e, d] = await awaitWrap(getData(this.props.caseDetail.id))
    this.setState({ loading: false })
    if (e === null && d !== null) {
      this.setState({
        list: d
      })
    }
  }

  componentDidMount () {
    this.initData()
  }

  // 生成历史文书行
  renderDocumentLine (arr, index) {
    const list = []
    arr.forEach((li, i) => {
      list.push(<TextCell key={li.id}><DocLink title={li.original_filename} src={li.url} onClick={() => window.open(li.value, '_blank')} /></TextCell>)
      if (i < 2) {
        list.push(<Split key={index + '-' + i} />)
      }
    })
    return (
      <TextLine key={index}>
        {list}
      </TextLine>
    )
  }

  render () {
    if (!this.state.loading && this.state.list.length === 0) {
      return (
        <Alert
          message='当事人未提交答辩信息'
          type='warning'
          closable
          showIcon
        />
      )
    }
    return (
      <div>
        <ApproveBlock>
          <Header title='仲裁答辩' />
          <Skeleton active loading={this.state.loading} />
          {
            this.state.list.map((li, i) => {
              const files = li.file instanceof Array ? li.file : []
              return (
                <div key={i}>
                  <TitleLine title='答辩人' operator={li.defender} time={formatDate(li.create_datetime, 'YYYY-MM-DD HH:mm')} />
                  <TextLine>{li.statement}</TextLine>
                  {
                    files.length > 0 && this.renderDocumentLine(files, i)
                  }
                </div>
              )
            })
          }
        </ApproveBlock>
      </div>
    )
  }
}

Avoid.propTypes = {
  // caseDetail: PropTypes.object,
  // active: PropTypes.bool,
  // refreshCaseData: PropTypes.func,
  // editable: PropTypes.bool
  // fileList: PropTypes.array
  // getFileList: PropTypes.func
}
Avoid.defaultProps = {
  caseDetail: {},
  active: false,
  refreshCaseData: () => { },
  editable: false,
  fileList: [],
  getFileList: () => { }
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(Avoid)
